<template>
  <div>
    <el-dialog :visible.sync="dialog.isShow" width="60%" :show-close="false" :fullscreen="fullscreen" @open="openGetThireData">
      <el-row slot="title">
        <el-col :span="10" style="padding-top: 5px">
          <span style="font-size: 18px;">{{dialog.title}}</span>
        </el-col>
        <el-col :span="2" :offset="11">
          <el-button type="text" v-if="!fullscreen" icon="iconfont ali-quanping" @click="fullscreen = true" style="float: right"></el-button>
          <el-button type="text" v-else icon="iconfont ali-zuixiaohua" @click="fullscreen = false" style="float: right" ></el-button>
        </el-col>
        <el-col :span="1">
          <el-button type="text" icon="iconfont ali-guanbi" @click="close" style="float: right"></el-button>
        </el-col>
      </el-row>

      <el-form :model="form" ref="createPage" label-width="90px">
        <el-form-item label="模块名称" prop="model_name" :rules="filter_rules({required:true})">
          <el-input clearable style="width: 60%;" placeholder="请输入活动主题" v-model.trim="form.model_name"></el-input>
        </el-form-item>
        <el-form-item label="模块图标" prop="banner_bath" :rules="filter_rules({type: 'upload'})">
          <img v-if="form.banner_bath" :src="form.banner_bath" class="avatar" @click="sizeSet">
          <i v-else class="el-icon-plus avatar-uploader-icon" @click="sizeSet"></i>
        </el-form-item>
        <el-form-item label="跳转类型" prop="jump_type">
          <el-select v-model="form.jump_type" placeholder="请选择">
            <el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="列表设置" v-show="form.jump_type === 0">
          <listSize></listSize>
          <!-- 添加第三方模块 + 添加链接弹层 -->
          <section>
            <div>
              <!-- <el-collapse  style="width: 80%;" v-model="activeName">
                <el-collapse-item title="第三方模块" name="1" style="padding-left:12px;">
                  <el-row type="flex" justify="end">
                    <el-button type="primary" size="mini" class="btn" @click="openForm('add')" plain>添加链接</el-button>
                  </el-row>
                  <el-row type="flex" justify="end">
                    <el-table :data="thirdData" stripe style="width: 80%;" v-loading="loading">
                    <el-table-column prop="file_title" label="模块名称"/>
                    <el-table-column align="center" label="模块图标">
                      <template slot-scope="{row}">
                          <img class="table-img" :src="row.banner_path" alt="" style="width:60px; height:60px;">
                      </template>
                    </el-table-column>
                    <el-table-column prop="url" label="链接" align="center"/>
                      <el-table-column  label="操作" align="center" width="100%">
                      <template slot-scope="scope">
                        <el-button @click="openForm('edit', scope.row)" type="text" size="small">编辑</el-button>
                        <el-button @click="deleThirdGetData(scope.row)"  type="text" size="mini">删除</el-button>
                      </template>
                    </el-table-column>
                    </el-table>
                  </el-row>
                </el-collapse-item>
              </el-collapse> -->

              <!-- 添加弹层 -->
              <el-dialog  width="40%" :append-to-body=true :visible.sync="dialogVisible" :title="mydialog.title" >
                <el-form :model="formData" label-width="90px" ref="myfrom">
                  <el-form-item label="模块名称" prop="file_title" :rules="filter_rules({required:true})">
                    <el-input clearable v-model="formData.file_title" style="width: 60%;" placeholder="请输入模块名称" ></el-input>
                  </el-form-item>
                  <el-form-item label="组织图片" prop="banner_path" :rules="filter_rules({type: 'upload'})">
                      <img v-if="formData.banner_path" :src="formData.banner_path" class="avatar" @click="sizeSet">
                      <i v-else class="el-icon-plus avatar-uploader-icon" @click="sizeSet"></i>
                  </el-form-item>
                  <el-form-item label="链接" prop="url" :rules="filter_rules({required:true})">
                    <el-input clearable style="width: 60%;" v-model="formData.url" placeholder="请输入链接名称" ></el-input>
                  </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="closeTemp">取 消</el-button>
                  <el-button type="primary" @click="addData">保 存</el-button>
                </span>
              </el-dialog>
              <section>
              <size-temp ref="size" :img.sync="formData.banner_path" title="图片设置"></size-temp>
              </section>
            </div>
          </section>

        </el-form-item>
        <el-form-item label="输入地址" prop="url" :rules="filter_rules({required:true})" v-if="form.jump_type === 1">
          <el-input clearable style="width:70%;" v-model.trim="form.url"></el-input>
        </el-form-item>
        <el-form-item label="输入地址" prop="url" :rules="filter_rules({required:true})" v-if="form.jump_type === 2">
          <el-input clearable style="width:70%;" v-model.trim="form.url"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="validate">保 存</el-button>
      </span>
    </el-dialog>
    <section>
      <size-temp ref="size" :img.sync="form.banner_bath" title="图片设置"></size-temp>
    </section>
  </div>
</template>
<script>
import sizeTemp from "@/components/draggableSize/index2";
import listSize from "./listSet";
import { pageSet_save, pageSet_edit, pageSet_listAll } from "@/api/pageSet";
import { organization_listAll } from '@/api/organization';
import { thirdPartyPage_listAll, thirdPartyPage_save, thirdPartyPage_edit, thirdPartyPage_delete,} from "@/api/thirdPartyPage";
export default {
  data() {
    return {
      formData: { banner_path: ''},
      mydialog:{title: '',},
      dialogVisible: false,
      thirdData: [],
      loading: false,
      activeName: '1',
      fullscreen: false,
      options: [
        { id: 0, label: "列表" },
        { id: 1, label: "指定页面" },
        { id: 2, label: "第三方页面" }
      ],
      jump_type: 0
    };
  },
  components: { sizeTemp, listSize },
  props: {
    PorganizationId: {
      type: Number,
      default() {}
    },
    dialog: {
      type: Object,
      default() {}
    },
    tableList: {
      type: Array,
      default() {}
    },
    form: {
      type: Object,
      default() {}
    }
  },
  methods: {
    //删除第三方数据
    async deleThirdGetData(row){
      try {
        const res = await this.$confirm("确认删除吗？");
        if(res == 'confirm'){
          this.loading = true;
         const {data} = await thirdPartyPage_delete({id:row.id});
          if(data.status == 100){
            this.loading = false;
            this.$message.success("删除成功！");
          }
        }
      } catch (error) {
        // this.$message.warning('删除失败!');
      }
      this.openGetThireData();
    },
      //添加第三方链接
     async saveObj(){
      if(this.formData ===''){
        this.$message.wraning('表单不能为空！');
        return
      }else{
        const pramt  = {
          ...this.formData, company_id: localStorage.getItem("companyId") - 0,
          pageSet_id: sessionStorage.getItem("pageSetRow_Id") - 0,
          organization_id: sessionStorage.getItem("organization_id") - 0,
        };
        let {data} = await thirdPartyPage_save(pramt);
        if(data.status == 100){
         this.$message.success('添加成功!');
         this.dialogVisible = false;
        }else{
          this.$message.wraning('添加失败!');
        }
      }
      this.openGetThireData();
    },

     //编辑第三方链接
     async editObj(){
      if(this.formData ===''){
        this.$message.wraning('表单不能为空！');
        return
      }else{
        const pramt  = {
          ...this.formData, company_id: localStorage.getItem("companyId") - 0,
          pageSet_id: sessionStorage.getItem("pageSetRow_Id") - 0,
          organization_id: sessionStorage.getItem("organization_id") - 0,
        };
        let {data} = await thirdPartyPage_edit(pramt);
        if(data.status == 100){
         this.$message.success('添加成功!');
         this.dialogVisible = false;
      }else{
        this.$message.wraning('添加失败!');
        }
      }
    },
    //第三方数据查询
    async openGetThireData(){
      this.loading = true;
      let {data} = await thirdPartyPage_listAll({
        company_id: localStorage.getItem("companyId")-0,
        pageSet_id: sessionStorage.getItem("pageSetRow_Id") - 0,
        organization_id: sessionStorage.getItem("organization_id") - 0,
      });
      if(data.status===100){
        this.loading = false;
        this.thirdData = data.data.rows;
      }
    },
     addData(){
      this.activeName = '0';
      this.$refs["myfrom"].validate(valid =>{
        if(valid){
          if(this.mydialog.title == '添加链接'){
            this.saveObj();
          }else{
            this.editObj();
          }
        }else{
          return false;
        }
      });
      this.openGetThireData();
    },
    closeTemp(){
      this.dialogVisible = false;
    },
    async openForm(e, row){
      if(e === "edit"){
         this.mydialog.title = "编辑链接"
         this.dialogVisible = true;
         this.formData = row;
      }else{
         this.mydialog.title = '添加链接';
         this.dialogVisible = true;
         //清空表单
         this.formData = {};
      }
    },

    close(){
      let len = this.tableList.length
      this.dialog.isShow = false;  //关闭添加模块弹窗
      //关闭页面弹窗 sessionStorage - pageSetRow_Id 减 1
      // if(this.dialog.title === '添加模块'){
      //   let pageId = (sessionStorage.getItem('pageSetRow_Id') - 0) - len - 1;
      //   sessionStorage.setItem("pageSetRow_Id", pageId);
      // }
    },
    async getValaaa(){
      // console.log(this.$refs,'this.$refs')
      let {datas} = await this.$refs.aasd.getVal();
    },
    //保存数据
    async pageSetSave() {
      this.$emit("update:dialog", {isShow: false})
      this.loading = true;
      const pramt  = {
        ...this.form, company_id: localStorage.getItem("companyId") - 0,
        organization_id: this.PorganizationId
      };
      const { data } = await pageSet_save(pramt);
      if (data.status == 100) {
          this.$message.success("保存成功");
          this.$emit("initList");
      }
      this.loading = false;
    },
     //编辑数据
    async pageSetEdit() {
      this.$emit("update:dialog", {isShow: false})
      this.loading = true;
      const { data } = await pageSet_edit(this.form);
      if (data.status == 100) {
          this.$message.success("编辑成功");
          this.$emit("initList");
      }
      this.loading = false;
    },
    async validate() {//数据保存
      this.$refs.createPage.validate(valid => {
        if (valid) {
            if(this.dialog.title ==='编辑内容'){
              this.pageSetEdit();
            }else{
              this.pageSetSave();
            }
        } else {
            return false;
        }
      });
    },
    sizeSet() {
      this.$refs.size.open();
    }
  }
};
</script>
<style lang="scss" scoped>
$border: 1px dashed #d9d9d9;
$picture-size: 120px;
.avatar-uploader {
  .el-upload {
    border: $border;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    &:hover {
      border-color: #409eff;
    }
  }
}

.avatar-uploader-icon {
  border: $border;
  font-size: 28px;
  color: #8c939d;
  width: $picture-size;
  height: $picture-size;
  line-height: $picture-size;
  text-align: center;
  border-radius: 5px;
  cursor: pointer;
}

.avatar {
  height: 70px;
  width: 70px;
  border-radius: 50%;
  // width: 60%;
  display: block;
  cursor: pointer;
}
</style>
